<template>
    <view class="m-navbar-app" :style="mNavbarStyle">
        <view class="m-navbar" :style="'background: ' + bg + ';'">
            <view class="m-status-bar-height" :style="statusBarHeightStyle"></view>
            <view class="m-navbar-con" :style="marginRight">
                <view class="back" v-if="showBack" @click="bindTapBack">
                    <image mode="widthFix" :src="backIcon" class="back-icon" v-if="backIcon"></image>
                    <text class="back-title" v-if="showBackTitle">返回</text>
                </view>
                <view class="title" v-if="title" :style="'color:' + color + ';'">{{ title }}</view>
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "m-navbar1",
    data() {
        return {
            statusBarHeight: 0,
            weixinRightTopBtn: 0
        }
    },
    mounted() {
        this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
        // #ifdef MP-WEIXIN
        let weixinInfo = wx.getMenuButtonBoundingClientRect();
        this.weixinRightTopBtn = weixinInfo.width;
        // #endif
    },
    props: {
        showBack: {
            type: Boolean,
            default: true
        },
        showBackTitle: {
            type: Boolean,
            default: false
        },
        backIcon: {
            type: String,
            default: '/static/images/back.png'
        },
        title: {
            type: String,
            default: ''
        },
        bg: {
            type: String,
            default: '#fff'
        },
		color: {
			type: String,
			default: '#000'
		}
    },
    computed: {
        statusBarHeightStyle() {
            if (!this.statusBarHeight) return '';
            return `height: ${ this.statusBarHeight }px;`;
        },
        marginRight() {
            if (!this.weixinRightTopBtn) return '';
            return `padding-right: calc(${ this.weixinRightTopBtn }px + 30rpx);`;
        },
        mNavbarStyle() {
            if (!this.statusBarHeight) return '';
            return `height: calc(${ this.statusBarHeight }px + 90rpx);`;
        },
    },
    methods: {
        bindTapBack() {
            uni.navigateBack({
                fail() {
                    uni.switchTab({url: '/pages/index/index'})
                }
            });
        }
    }
}
</script>

<style lang="scss">
.m-navbar-app{
    width: 100%;
    height: 90rpx;
    .m-navbar{
        background: transparent;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 9999;
        .m-status-bar-height{width: 100%; height: var(--status-bar-height);}
        .m-navbar-con{
            width: 100%; height: 90rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            position: relative;
            .back{
                display: flex;
                align-items: center;
                padding-right: 30rpx;
                position: relative;
                z-index: 10000;
                .back-icon{
                    width: 36rpx;
                    height: 36rpx;
                }
                .back-title{
                    font-size: 58rpx;
                    color: #000;
                    font-weight: bold;
                }
            }
            .title{
                flex: 1;
                font-size: 38rpx;
                font-weight: bold;
                display: flex;
                align-items: center;
                position: absolute;
                justify-content: center;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }
    }
}

</style>